import '../10.26-放大镜特效/index.css'
import '../10.26-放大镜特效/images/cw1.png'
import '../10.26-放大镜特效/images/cw2.png'
import '../10.26-放大镜特效/images/cw3.png'
import '../10.26-放大镜特效/images/cw4.png'
let box = document.querySelector('.box');
let smallbox = document.querySelector('.smallBox');
let mask = document.querySelector('.mask');
// let bigbox = document.querySelector('.bigBox');
let img = document.querySelector('.bigBox>img');

mask.addEventListener('mousemove', function (e) {
    let maskMax = smallbox.offsetWidth - mask.offsetWidth;
    let X = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
    let Y = e.pageY - box.offsetTop - mask.offsetHeight / 2;
    if (X < 0) {
        X = 0;
    } else if (X >= maskMax) {
        X = maskMax;
    }

    if (Y < 0) {
        Y = 0;
    } else if (Y >= smallbox.offsetHeight - mask.offsetHeight) {
        Y = smallbox.offsetHeight - mask.offsetHeight;
    }

    mask.style.left = X + 'px';
    mask.style.top = Y + 'px';

    img.style.transform = `translate(${-X * 4}px,${-Y * 4}px)`;
});
